<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
		<title>Stopwatch</title>
		<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

		<script type="text/javascript">

/* http://www.quirksmode.org/js/cookies.html */
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

$(function() {
	function ClockViewModel() {
		var self = this;

		self.tenths = ko.observable(0);
		self.seconds = ko.observable("00");
		self.minutes = ko.observable("00");
		self.hours = ko.observable("00");
		self.days = ko.observable(0);
		self.running = ko.observable(false);

		var _begin = null;
		var _running = false;
		var _timeoutId = null;
		var _total = 0;

		self.start = function() {
			if (self.running()) {
				return;
			}

			self.running(true);
			createCookie("running", true, 10000);

			if (_begin = readCookie("begin")) {
			} else if (readCookie("total")) {
				_total = readCookie("total")
				_begin = new Date().getTime() - _total;
				createCookie("begin", _begin, 10000);
			} else {
				_begin = new Date().getTime() - _total;
				createCookie("begin", _begin, 10000);
			}

			var tick = function () {
				self.display(new Date().getTime() - _begin);

				if (self.running()) {
					_timeoutId = setTimeout(tick, 100);  //tick every tenth of a second
				}
			}
			_timeoutId = setTimeout(tick);
		}

		self.display = function(elapsed) {
			var days = Math.floor(elapsed / 86400000);
			var hours = Math.floor((elapsed - (days * 86400000)) / 3600000);
			var minutes = Math.floor((elapsed - (days * 86400000) - (hours * 3600000)) / 60000);
			var seconds = Math.floor((elapsed - (days * 86400000) - (hours * 3600000) - (minutes * 60000)) / 1000);
			var tenths = Math.floor((elapsed - (days * 86400000) - (hours * 3600000) - (minutes * 60000) - (seconds * 1000)) / 100);

			self.days(days);
			self.hours((hours < 10 ? "0" : "").concat(hours));
			self.minutes((minutes < 10 ? "0" : "").concat(minutes));
			self.seconds((seconds < 10 ? "0" : "").concat(seconds));
			self.tenths(tenths);
		}

		self.stop = function() {
			clearTimeout(_timeoutId);
			if (self.running() && _begin !== null) {
				_total = new Date().getTime() - _begin;
				createCookie("total", _total, 10000);
				eraseCookie("begin");
			}
			self.running(false);
			createCookie("running", false, 10000);
		}

		self.reset = function() {
			clearTimeout(_timeoutId);
			self.running(false);
			_begin = null;
			_total = 0;
			self.tenths(0);
			self.seconds("00");
			self.minutes("00");
			self.hours("00");
			self.days(0);
			eraseCookie("running");
			eraseCookie("total");
			eraseCookie("begin");
		}

		self.toggle = function() {
			if (self.running()) {
				self.stop();
			} else {
				self.start();
			}
		}
	}

	var obj = new ClockViewModel();

	ko.applyBindings(obj);

	if (readCookie("running") === "true") {
		obj.start();
	} else if (readCookie("total")) {
		obj.display(parseInt(readCookie("total")));
	}
});

		</script>

		<style type="text/css">
			html,body{background:#000;height:100%;margin:0;padding:0;font-family:consolas,bitstream vera sans mono,monospace;}

			.timer{/*IE is horrible!*/background:transparent;color:#fff;text-align:right;font-size:4em;}
			.display{padding:10px;}
			.reset{padding:10px;color:#09c;font-size:.4em;cursor:pointer;}

			.days{font-size:1.4em;}
			.hours{font-size:1.2em;}
			.minutes{font-size:1em;}
			.seconds{font-size:.8em;}
			.tenths{font-size:.4em;}
			.indicator{font-size:.2em;vertical-align:super;}
			.period{font-size:.2em;}

			.reset:hover{background:#09c;color:#fff;}
			.display.running:hover{background:#c00;}
			.display:hover{background:#690;cursor:pointer;}
		</style>
	</head>
	<body>
		<div class="timer"><span class="display" data-bind="click:toggle,css:{running: running()}"><span data-bind="visible: days() > 0"><span class="days" data-bind="text:days"></span><span class="indicator">D</span></span><span data-bind="visible: days() > 0 || hours() > 0"><span class="hours" data-bind="text:hours"></span><span class="indicator">H</span></span><span data-bind="visible: days() > 0 || hours() > 0 || minutes() > 0"><span class="minutes" data-bind="text:minutes"></span><span class="indicator">M</span></span><span class="seconds" data-bind="text:seconds"></span><span class="indicator">S</span><span class="period">.</span><span class="tenths" data-bind="text:tenths"></span></span><span class="reset" data-bind="click: reset">&#x21BB;</span></div>
	</body>
</html>